<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 常规流
    浮动
    定位

    定位属性：position，默认值为static（静态定位）其他值为：relative：相对定位；absolute：绝对定位；fixed：固定定位

    定位元素：即一个元素，只要position取值不是static则认为该元素为一个定位元素

    定位元素会脱离文档流 除了相对定位

    一个脱离文档流的元素：
    1、文档流中的元素摆放会忽略脱离文档流的元素
    2、文档流在auto计算高度 会忽略脱离文档流的元素

    相对定位 relative
    不脱离文档流 原文档是常规流、浮动 就还是原来的样子 
    就是在原来的位置上进行偏移
    position：relative css属性：left right top bottom
    相对定位一般用于给绝对定位当包含块 因为它不会改变原有元素

    绝对定位 absolute 
    脱离文档流 
    宽度设为auto时，适应内容
    包含块的变化 ：寻找祖先元素中的第一个定位元素（relative、absolute、fixed），它的填充块，找不到第一个定位元素，则为整个网页（初始化包含块）类似于两个图层层叠（标签） 

    固定定位 fixed
    脱离文档流
    其他情况和绝对定位一样
    区别在于 包含块不同于绝对定位 包含块：视口（你看到窗口 可能大于初始化包含块 或者小于初始化包含块）类似于广告

    定位下的居中：
    1、将上下（左右）的距离设置为0
    2、将上下（左右）的margin值设置为auto

    那么在绝对定位和固定定位中，margin为auto会自动吸收剩余的空间。不同于常规流不能设置margin上下的margin为auto
    
    多个定位元素重叠时
    规则：堆叠上下文
    设置z-index 通常情况下，z-index值越大，越靠近用户
    当z-index值为负数，遇到常规流、浮动会被覆盖（行盒会避开浮动，但是行盒在z-index为负数会覆盖定位元素）

    附加：
    绝对定位 和 固定定位一定是块盒
    没有外边距合并
    绝对定位 和 固定定位一定不可以浮动 浮动、常规流、定位 排列只能选择一个 （浮动强制变为none）

-->
</body>
</html>